<template>
  <div class="son_box">
    <hr />
    <h3>1 组件通信</h3>
    <div class="son_comp">子组件</div>
    <p>展示父组件数据：{{ propData }}</p>
    <button @click="propSend">子到父 props 传递函数形式</button>
    <br />
    <button @click="handleEmitDateToPrant">子到父 给子组件绑定自定义事件</button>
    <br />
    <button @click="handlerInject">inject change date</button>

    <el-steps :active="0" finish-status="success">
      <el-step title="Step 1" />
      <el-step title="Step 2" />
      <el-step title="Step 3" />
    </el-steps>

    <el-popconfirm title="Are you sure to delete this?">
      <template #reference>
        <el-button>Delete</el-button>
      </template>
    </el-popconfirm>
  </div>
</template>

<script>
import { inject } from 'vue';
export default {
  name: 'SonPrp',
  props: {
    propData: {
      type: Object,
      default: () => {}
    },
    propFn: {
      type: Function
    }
  },
  setup(prop, context) {
    console.log('---------组件通信---------');
    console.log(prop.propData);
    console.log(prop.propData);

    console.log('-------------provid+inject------------');
    let result = inject('provideDAte');
    console.log('injectinjectinject', result);

    function handlerInject() {
      result.age = 5564;
      result.info = '565162165236232';
      console.log(result);
    }

    // props 传递函数形式实现子到父通信
    const propSend = () => {
      prop.propFn({
        info: 'z555565'
      });
    };

    // 自定义事件
    const handleEmitDateToPrant = () => {
      context.emit('receDate', { infoe: '子组件的数据' });
    };

    // 父组件通过ref 调用子组件的方法
    const refFn = (value) => {
      console.log('父组件通过ref 调用子组件的方法 ', value);
    };

    return {
      handleEmitDateToPrant,
      refFn,
      propSend,
      handlerInject
    };
  }
};
</script>

<style lang="scss" scoped>
.son_comp {
  height: 100px;
  width: 100px;
  background: #f40;
}
</style>
